<template>
  <div class="index">
    <!-- 头部 -->
    <header>
      <dl>
        <dt>
          <img class="logo" src="/img/images/goods.gif" alt="" />
        </dt>
        <dd>
          <p>
            <img class="brand" src="/img/brand@2x.png" alt="" />
            <span class="title">{{ headerinfo.name }}</span>
          </p>
          <p>{{ headerinfo.description }}</p>
          <p>
            <img
              style="width:14px;margin-right:8px"
              src="/img/decrease_1@2x.png"
              alt=""
            />
            <span>
              {{ headerinfo.supports[0].description }}
            </span>
          </p>
          <p>
            <van-icon class="number" name="arrow" @click="show = true" />
          </p>
        </dd>
      </dl>
      <div class="notice" @click="show = true">
        <img class="noticeimg" src="/img/bulletin@2x.png" alt="" />
        <span class="roll">{{ headerinfo.bulletin }}</span>
      </div>
    </header>

    <!-- 主体 -->
    <div class="content">
      <!-- content -->
      <van-tabs style="width:100%;" v-model="active">
        <van-tab title="商品" to="goods">
          <router-view></router-view>
        </van-tab>
        <van-tab title="评价" to="evaluate">
          <router-view></router-view>
        </van-tab>
        <van-tab title="商家" to="shop">
          <router-view></router-view>
        </van-tab>
      </van-tabs>
    </div>

    <!-- 底部 -->
    <footer>
      <Bottom></Bottom>
    </footer>

    <!-- 遮罩层 -->
    <van-overlay :show="show" @click="show = false">
      <h3 style="color:#fff;font-size:22px">{{ headerinfo.name }}</h3>
      <p class="stars" style="width:100%;display:flex;justify-content:center">
        <img src="/img/star24_on@3x.png" alt="" />
        <img src="/img/star24_on@3x.png" alt="" />
        <img src="/img/star24_on@3x.png" alt="" />
        <img src="/img/star24_on@3x.png" alt="" />
        <img src="/img/star24_off@3x.png" alt="" />
      </p>
      <p
        style="color:#fff;font-size:16px;font-weight:bold;width:100%;display:flex;justify-content:center"
      >
        优惠信息
      </p>
      <ul class="special">
        <li style="display:flex;justify-content:center">
          <img src="/img/decrease_1@2x.png" alt="" />
          <span> &emsp;{{ headerinfo.supports[0].description }} </span>
        </li>
        <li style="display:flex;justify-content:center">
          <img src="/img/discount_1@2x.png" alt="" />
          <span> &emsp;{{ headerinfo.supports[1].description }} </span>
        </li>
        <li style="display:flex;justify-content:center">
          <img src="/img/discount_1@2x.png" alt="" />
          <span> &emsp;{{ headerinfo.supports[2].description }} </span>
        </li>
        <li style="display:flex;justify-content:center">
          <img src="/img/special_1@2x.png" alt="" />
          <span> &emsp;{{ headerinfo.supports[3].description }} </span>
        </li>
        <li style="display:flex;justify-content:center">
          <img src="/img/special_1@2x.png" alt="" />
          <span> &emsp;{{ headerinfo.supports[4].description }} </span>
        </li>
      </ul>

      <div
        class="announce"
        style="width:70%;display:flex;flex-wrap:wrap;justify-content:center"
      >
        <p
          style="width:100%;font-size:16px;font-weight:bold;display:flex;justify-content:center;margin-bottom:10px"
        >
          商家公告
        </p>
        <p style="line-height:26px">
          {{ headerinfo.bulletin }}
        </p>
      </div>

      <a href="javascript:;" class="close">
        X
      </a>
    </van-overlay>
  </div>
</template>

<script>
import Bottom from "@/components/bottom.vue";
export default {
  name: "index",
  components: { Bottom },
  data() {
    return {
      headerinfo: [],
      active: 0,
      show: false
    };
  },
  mounted() {
    this.$axios.get("/api/data.json").then(res => {
      console.log(res);
      this.headerinfo = res.data.seller;
    });
  }
};
</script>

<style lang="scss" scoped>
.index {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
html,
body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  header {
    width: 100%;
    height: 166px;
    background: rgba(7, 17, 27, 0.5);
    color: #fff;
    background: url("/img/images/bg.gif");
    background-size: 100% 100%;
    position: fixed;
    top: 0;
    overflow: hidden;
    .notice {
      width: 100%;
      height: 56px;
      background: rgba(7, 17, 27, 0.6);
      padding: 0 24px;
      margin-top: 26px;
      display: flex;
      align-items: center;
      cursor: pointer;
      .roll {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-left: 6px;
      }
    }
    dl {
      margin-top: 12px;
      margin-left: 20px;
      margin-right: 14px;
      display: flex;
      dd {
        margin-left: 16px;
        margin-top: 2px;
        p {
          width: 100%;
          display: flex;
          align-items: center;
          margin: 2px 0;
          img {
            width: 30px;
          }
          .title {
            font-size: 16px;
            font-weight: bold;
            line-height: 18px;
            margin-left: 6px;
          }
          p:nth-of-type(4) {
            position: relative;
          }
          .number {
            padding: 7px 6px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 50%;
            line-height: 12px;
            position: absolute;
            font-size: 10px;
            right: 12px;
            cursor: pointer;
          }
        }
      }
    }
    .logo {
      width: 64px;
      height: 64px;
      border-radius: 6px;
    }
  }
  .content {
    width: 100%;
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    margin-top: 166px;
    overflow: auto;
    .van-tabs__wrap {
      width: 100%;
      .van-tabs__nav,
      .van-tabs__nav--line {
        position: fixed;
        top: 0;
        overflow: auto;
      }
    }
  }
  footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    height: 56px;
    background: #141d27;
  }
  .van-overlay {
    width: 100%;
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    .stars {
      & > img {
        margin: 0 10px;
      }
    }
    .special {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      & > li {
        width: 100%;
        margin: 8px 0;
        & > img {
          float: left;
        }
        & > span {
          float: left;
        }
      }
    }
    .close {
      font-size: 40px;
      color: #fff;
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      justify-content: center;
      margin-top: 10px;
    }
  }
}
</style>